<script>
export default {
  name: 'DingDanComPonent',
  data(){
    return{
      clickBtn:0,
      btnArr:["帮我买","帮我取","帮我送"],
      routerArray:["/help/dingdan","/help/dingdan/qu","/help/dingdan/song"],

      value: false,
      select:"",

      primary:'',
      value1: '',
      input1:'',
      input2:'',
      input3:'',
    }
  },
  methods :{
    changeComponent(index){
      this.clickBtn = index;
      this.$router.push(this.routerArray[index]).catch(()=>{})
    }
  },
}
</script>

<template>
<div class="dingdan">
  <div class="top">
    <el-button v-for="(str,i) in btnArr" :key="str" :type="clickBtn == i ? 'danger' : 'primary' " @click="changeComponent(i)">{{str}}</el-button>

    <div class="border">
      <div class="one">
        <span>用户手机号:&nbsp;&nbsp;</span>
        <el-input v-model="input1" style="width: 170px"></el-input>
      </div>
      <div class="two">
        <span>下单人姓名:&nbsp;&nbsp;</span>
        <el-input v-model="input2" style="width: 170px"></el-input>
      </div>
      <div class="three">
        <span>状态:&nbsp;&nbsp;</span>
        <el-select v-model="select" slot="prepend" placeholder="全部" style="width: 170px">
          <el-option label="全部" value="1"></el-option>
          <el-option label="已取消" value="2"></el-option>
          <el-option label="待接单" value="3"></el-option>
          <el-option label="已接单配送中" value="4"></el-option>
          <el-option label="已完成" value="5"></el-option>
        </el-select>
      </div>
      <div class="four">
        <span>所属门店:&nbsp;&nbsp;</span>
        <el-input v-model="input3" style="width: 170px"></el-input>
      </div>

      <div class="block">
        <span class="demonstration">下单日期:&nbsp;&nbsp;</span>
        <el-date-picker class="block1"
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
        </el-date-picker>
        <el-button class="search" type="primary">搜索</el-button>
      </div>
    </div>

    <div>
      <router-view></router-view>
    </div>

    <div class="fenye">
      <el-pagination
          :total="1"
          layout="prev, pager, next">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<style scoped>
.dingdan{
  height: 500px;
}
.top{
  margin-top: 15px;
  margin-left: 15px;
  font-size: 16px;
}
.top span{
  margin: 0 15px;
}
.border{
  margin-top: 20px;
}
.one{
  display: inline-block;
  width: 300px;
}
.two{
  display: inline-block;
  width: 300px;
}
.three{
  display: inline-block;
  width: 300px;
}
.four{
  display: inline-block;
  width: 300px;
}
.block{
  margin: 20px auto;

}
.search{
  width: 100px;
  margin-left: 20px;
}

</style>